<template>
	<view>
		<view class="carousel">
			<swiper circular 
				indicator-dots 
				:autoplay="true" 
				duration="1000" 
				:circular="true"
				indicatorActiveColor="#D3D3D3">
				<swiper-item v-for="item in swipers">
					<image :src="item"></image>
					<view class="likeIcon" @click="clickLike">
						<u-icon v-if="!likeIndex" name="heart" color="#DCDCDC" size="20"></u-icon>
						<u-icon v-if="likeIndex" name="heart-fill" color="	#DC143C" size="20"></u-icon>
						<text>{{likeText}}</text>
					</view>
				</swiper-item>
				
			</swiper>
		</view>
		<view class="content">
			<view class="t_c">
				<view class="title">
					<text>{{foodMessage.name}}</text>
				</view>
				<view class="phone">
				</view>

			</view>

			<view class="description">
				<text>{{foodMessage.foodExplain}}</text>
			</view>
			<view class="price">
				<u-icon name="rmb" color="red" size="40rpx" bold="true"></u-icon>
				<text class="selling_price">{{parseFloat(foodMessage.sprice)}}</text>
				<text class="inflated_prices">{{parseFloat(foodMessage.oprice)}}</text>
				<u-popup :show="show" @close="close" @open="open" mode="center" closeable="true">
					<view class="Pop-the-layer">
						<view class="Spec-sheet">
							<text class="foodname">菜品名称</text>
							<text>辣度</text>
							<view class="flavor">
								<view class="Options">
									微辣
								</view>
								<view class="Options">
									中辣
								</view>
								<view class="Options">
									特辣
								</view>
							</view>
							<text>规格</text>
							<view class="flavor">
								<view class="Options">
									小份
								</view>
								<view class="Options">
									中份
								</view>
								<view class="Options">
									大份
								</view>
							</view>
							<view class="Add-to-shopping">
								<text>总计: 9.9元</text>
								<u-button text="+ 加入购物车"></u-button>
							</view>
						</view>
					</view>
				</u-popup>
				<!-- <u-button @click="show = true" >选规格</u-button> -->
			</view>
		</view>
		<view class="interval">
		</view>
		<view class="p_d">
			<view class="jump">
				<view class="jump-y" @tap="changeNav(0)">
					<text :class="currentIndex === 0 ? 'nav-actived' : '' " style="padding-bottom: 5rpx;">详细</text>
				</view>
				<view class="jump-c" @tap="changeNav(1)">
					<text :class="currentIndex === 1 ? 'nav-actived' : '' " style="padding-bottom: 5rpx;">评论</text>
				</view>
			</view>
			<view class="preferential" v-if="currentIndex == 0">
				<text>主料: 暂无</text>
				<text>辅料: 暂无</text>
				<text>份量: 暂无</text>
			</view>
			<view class="dishes" v-if="currentIndex == 1">
				<view class="Evaluate-content" v-for="comment in comments">
					<view class="Customer-messages">
						<u-avatar :src="comment.avatar"></u-avatar>
						<view class="nickname">
							<text>{{comment.nickName}}</text>
							<text class="time">{{getTime(comment.createTime)}}</text>
						</view>
					</view>
					<view class="Customer-ratings">
						<u-rate :count="count" :value="comment.grade" size="30rpx"></u-rate>
						<text>{{comment.grade}} 颗小星星</text>
					</view>
					<view class="wrod">
						<view>
							{{comment.content}}
						</view>
						<image :src="comment.image" v-if="comment.image"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { searchFoodId, searchFoodComment } from '@/common/http.api.js'
export default {
	data() {
		return {
			foodMessage: {},
			dishes: {},
			count:5,
			comments:[],
			swipers: [],
			src: '../../../../static/img/1.jpg',
			currentIndex: 1,
			show: false,
			likeIndex:false,
		}
	},
	onLoad(id) {
		const idValue = id.id
		console.log(idValue)
		Promise.all([ searchFoodId(idValue), searchFoodComment(idValue)]).then( res => {
			this.foodMessage = res[0].data
			this.comments = res[1].rows
			console.log(this.foodMessage, 'foodMessage')
			this.swipers = this.foodMessage.image.split(",")
		})
	},
	methods: {
		clickLike(){
			this.likeIndex = !this.likeIndex
		},
		changeNav(index) {
			this.currentIndex = index
		},
		close() {
			this.show = false
		},
		getTime(time) {
			let createTime = new Date(time);
			return createTime.getFullYear()+'年'+createTime.getMonth()+'月'+createTime.getDay()+'日'+' '+createTime.getHours()+'时'+createTime.getMinutes()+'分'+createTime.getSeconds()+'秒'
		}
	}
}
</script>

<style>
	.carousel swiper {
		width: 100%rpx;
		height: 700rpx;
		margin: 15rpx;
		position: relative;
	}
	.carousel .likeIcon{
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		display: flex;
		justify-content: center;
		color: #fff;
		font-size: 25rpx;
		padding: 5rpx;
		border-radius: 20rpx;
		/* background-color: rgb(0, 0, 0, 0.5); */
	}
	.content .jump .underline {
		border-bottom: 6px solid red;
	}

	.carousel swiper-item image {
		width: 100%;
		height: 100%;
	}

	.content {
		height: 250rpx;
		margin: 30rpx;
	}

	.t_c {
		display: flex;
		justify-content: space-between;
	}

	.content .title text {
		font-size: 40rpx;
		font-weight: bold;
	}

	.content .description {
		padding: 10rpx 0;
		font-size: 30rpx;
		color: #8a8a8a;
	}

	.content .positioning {
		font-size: 20rpx;
		color: #f66309;
	}

	.price {
		display: flex;
		justify-content: space-between;
	}
.price .u-icon{
	margin-top: 10rpx;
	
}
	.Pop-the-layer {
		width: 500rpx;
	}

	.Pop-the-layer .Spec-sheet {
		margin: 20rpx;
	}

	.Pop-the-layer .Spec-sheet .foodname {
		margin-bottom: 40rpx;
		font-weight: bold;
		font-size: 40rpx;
		color: black;
	}

	.Pop-the-layer .Spec-sheet text {
		display: block;
		margin: 10rpx 0;
		color: #8a8a8a;
	}

	.Pop-the-layer .Spec-sheet .flavor {
		display: flex;
	}

	.Pop-the-layer .Spec-sheet .flavor .Options {
		border: 1rpx solid #ff9900;
		width: 120rpx;
		height: 40rpx;
		text-align: center;
		text-align: 40rpx;
		border-radius: 20rpx;
		margin: 20rpx;
		font-size: 28rpx;
	}

	.Pop-the-layer .Spec-sheet .Add-to-shopping {
		display: flex;
		justify-content: space-between;
		margin: 40rpx 0;
		border-bottom: 1rpx solid #fff;
	}

	.Pop-the-layer .Spec-sheet .Add-to-shopping text {
		color: black;
	}

	.Pop-the-layer .Spec-sheet .Add-to-shopping .u-button {
		margin: auto 0;
	}

	.selling_price {
		color: red;
		font-weight: bold;
		font-size: 50rpx;
	}

	.inflated_prices {
		padding-top: 10rpx;
		font-size: 30rpx;
		color: #8a8a8a;
		margin: 11rpx auto 0 20rpx;
		text-decoration: line-through;
	}

	.content .price .u-button {
		width: 200rpx;
		height: 55rpx;
		background-color: #FF8C00;
		color: #fff;
		font-size: 25rpx;
		border-radius: 5px;
		margin: auto 0;
	}

	.content .content-d .phone {
		position: relative;
		margin-left: 20rpx;
		text-align: center;
		width: 96rpx;
	}

	.content .content-d .phone .u-icon {
		width: 56rpx;
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	.collection {
		font-size: 20rpx;
		color: #8a8a8a;
	}

	.interval {
		width: 100%;
		height: 20rpx;
		background-color: #f5f5f5;
	}

	.p_d {
		margin: 30rpx;
		/* margin-bottom: 50rpx; */
	}

	.p_d .jump {
		display: flex;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #DCDCDC;
	}

	.p_d .jump .jump-c {
		margin: 0 30rpx;
	}

	.p_d .jump .nav-actived {
		font-size: 36rpx;
		font-weight: bold;
		border-bottom: 3px solid orangered;
	}

	.preferential {
		margin: 30rpx 0;

	}

	.preferential text {
		margin: 10rpx 0;
		display: block;
	}

	.dishes {
		margin: 30rpx 0;
	}
	.dishes .Evaluate-content{
		padding-bottom: 20rpx;
	}
	.dishes .Evaluate-content .Customer-ratings {
		margin-bottom: 10rpx;
		display: flex;
		font-size: 28rpx;
		color: #f66309;
	}
	
	.dishes .Evaluate-content .Customer-ratings .u-rate {
		margin-right: 20rpx;
	}
	
	.dishes .Evaluate-content .Customer-messages {
		height: 100rpx;
		background-color: #fff;
		display: flex;
		font-size: 28rpx;
	}
	
	.dishes .Evaluate-content .Customer-messages .nickname {
		margin: 5rpx 0 5rpx 20rpx;
	}
	
	.dishes .Evaluate-content .Customer-messages .nickname .time {
		display: block;
		margin-top: 3rpx;
		font-size: 20rpx;
		color: #8a8a8a;
	}
	
	.dishes .Evaluate-content .wrod {
		background-color: #fff;
		font-size: 28rpx;
		margin-bottom: 40rpx;
	}
	
	.dishes .Evaluate-content .wrod image {
		/* height: 200rpx;
		width: 300rpx; */
		margin-top: 20rpx;
	}
</style>
